<template>
  <div class="promotions">
    <a-page-header
      title="促销管理"
      sub-title="促销活动策划和执行"
    >
      <template #extra>
        <a-button type="primary">
          <PlusOutlined />
          新建促销
        </a-button>
      </template>
    </a-page-header>

    <a-card>
      <a-table
        :columns="columns"
        :data-source="promotions"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="getStatusColor(record.status)">
              {{ getStatusText(record.status) }}
            </a-tag>
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" size="small">查看</a-button>
              <a-button type="link" size="small">编辑</a-button>
              <a-button type="link" size="small" v-if="record.status === 'draft'">启用</a-button>
              <a-button type="link" size="small" v-if="record.status === 'active'">停用</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const columns = [
  { title: '促销名称', dataIndex: 'name', key: 'name' },
  { title: '促销类型', dataIndex: 'type', key: 'type' },
  { title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { title: '结束时间', dataIndex: 'endTime', key: 'endTime' },
  { title: '适用商品', dataIndex: 'products', key: 'products' },
  { title: '状态', dataIndex: 'status', key: 'status' },
  { title: '操作', key: 'action', width: 200 },
]

const promotions = ref([
  {
    id: 1,
    name: '新年大促销',
    type: '满减',
    startTime: '2024-01-20',
    endTime: '2024-02-10',
    products: '全场商品',
    status: 'draft'
  },
  {
    id: 2,
    name: '生鲜特价',
    type: '折扣',
    startTime: '2024-01-15',
    endTime: '2024-01-31',
    products: '生鲜类',
    status: 'active'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 2,
})

const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    draft: 'default',
    active: 'green',
    expired: 'red',
    disabled: 'orange'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    draft: '草稿',
    active: '进行中',
    expired: '已过期',
    disabled: '已停用'
  }
  return textMap[status] || status
}
</script>

<style scoped>
.promotions {
  padding: 24px;
}
</style>